<?php include('../include/head.php'); ?>
<body>
	<!-- 头部导航 -->
	<?php include('../include/header.php'); ?>
	<section class="main">
		<div class="content">
			<div class="container">
				<div class="movies-list-wrap mlw-topview">
					<div class="page-box">
                    	<nav>
                        	<ul class="pagination"></ul>
                        </nav>
                	</div>
					<div class="bd movies-list-container" id="movies-list-box">
						<ul id="movie-list-vue" class="ml-list">
							<li v-for="item in items" :data-movie-id="item.id" class="ml-item">
								<span class="mli-quality">HD</span>
								<a class="ml-mask jt" :data-movie-id="item.id" :title="item.title" :href="'/dome/movie/movie?'+item.id" target="_blank">
									<img class="lazy" :data-original="'https://image.tmdb.org/t/p/w185_and_h278_bestv2/'+item.poster_path" src="/dome/movie/images/loading.gif" alt="">
								</a>
							</li>
						</ul>
					</div>
					<div class="page-box">
                    	<nav>
                        	<ul class="pagination"></ul>
                        </nav>
                	</div>
					<script>
						var movieListVue = new Vue ({
							el: '#movie-list-vue',
							data: {
								items:[]
							}
						});
						var $width  = $(window).width();
							$.jqPaginator('.pagination', {
							    totalPages   : 979,
							    totalCounts  : 19566,
							    visiblePages : 5,
							    currentPage  : 1,
							    onPageChange: function (num, type) {
									tmdb.call("/discover/movie", {"language":"zh","page":num,"sort_by":"popularity.desc"},
										function(e){
											movieListVue.items=[];
											for (var i =0; i < e.results.length - 1; i++) {
												movieListVue.items.push(e.results[i]);
											}
											$("img.lazy").lazyload({effect : "fadeIn"});
											if (!jQuery.browser.mobile) {
										        $('.jt').qtip({
										            content: {
										                text: function (event, api) {
															$getMovieDetail(api.elements.target.attr('data-movie-id'),function(html){
																api.set('content.text', html);
															})
															return 'Loading...'; // 设置默认文字
										                },
										                title: function (event, api) {
										                    return $(this).attr('title');
										                }
										            },
										            position: {
												        my: 'top left',
												        at: 'top right',
												        viewport: $("#movies-list-box"),
                										effect: false,
												        target: 'mouse',
												        adjust: {
										                    mouse: false
										                },
										                show: {
										                    effect: false
										                }
													},
													hide: {
										                fixed: true
										            },
										            style: {
										                classes: 'qtip-light qtip-bootstrap',
										                width: 320
										            }
										        });
										    }
										}
									);	
									$pagination($width);
							    }
							});

						$(function(){
							$(window).resize(function(){
								$width  = $(window).width();
								$pagination($width);
							});
						});
					</script>

					
				</div>
			</div>
		</div>
	</section>
	<?php include('../include/footer.php'); ?>
	<script>
		$("img.lazy").lazyload({effect : "fadeIn"});
	</script>
</body>
</html>